<script setup lang="ts">
import { ref } from 'vue';
import type { Achievement } from '../types/Achievement'; // Adjust the import path
import type { ProjectIntroProps } from '../types/ProjectIntroProps'; // Adjust the import path
import type { Metric } from '../types/Metric';
defineProps<{ intro: ProjectIntroProps, }>();

const achievementColumns = [
  {
    title: '成果名称',
    dataIndex: 'achievement_name',
    key: 'achievement_name',
    render: (text: string, record: any) => ({
      children: text || '无',
      props: { rowSpan: record.achievement_name_rowSpan },
    }),
  },
  {
    title: '成果类型',
    dataIndex: 'achievement_type',
    key: 'achievement_type',
    render: (text: string, record: any) => ({
      children: text || '无',
      props: { rowSpan: record.achievement_type_rowSpan },
    }),
  },
  {
    title: '指标名称',
    dataIndex: 'metric_name',
    key: 'metric_name',
    render: (text: string) => text || '无',
  },
  {
    title: '当前状态',
    dataIndex: 'current_state',
    key: 'current_state',
    render: (text: string) => text || '无',
  },
  {
    title: '中期状态',
    dataIndex: 'medium_term_state',
    key: 'medium_term_state',
    render: (text: string) => text || '无',
  },
  {
    title: '完成状态',
    dataIndex: 'completion_state',
    key: 'completion_state',
    render: (text: string) => text || '无',
  },
];

const renderAchievementTable = (data: Achievement[]) => {
  const metrics = ref<Metric[]>([])

  const mergedData = data.flatMap((achievement) => {
    if (achievement.metric && achievement.metric.length > 0) {
      metrics.value = achievement.metric
    }
    else {
      metrics.value = [
        {
          metric_name: '无',
          current_state: '无',
          medium_term_state: '无',
          completion_state: '无',
        },
      ];
    }

    return metrics.value.map((metric, index) => ({
      key: `${achievement.achievement_name}-${index}`,
      achievement_name: index === 0 ? achievement.achievement_name : null,
      achievement_type: index === 0 ? achievement.achievement_type : null,
      achievement_name_rowSpan: index === 0 ? metrics.value.length : 0,
      achievement_type_rowSpan: index === 0 ? metrics.value.length : 0,
      ...metric,
    }));
  });

  return mergedData;
};
</script>

<template>
  <div class="tabs">
    <div>
      <h1 class="tabTitle">
        项目简介
      </h1>
      <div class="cardWrapper">
        {{ intro.introduction || '暂无' }}
      </div>
    </div>

    <div v-if="intro.innovation" style="margin-top: 1rem;">
      <h1 class="tabTitle">
        创新点
      </h1>
      <div class="cardWrapper">
        {{ intro.innovation }}
      </div>
    </div>

    <div v-if="intro.directionField" style="margin-top: 1rem;">
      <h1 class="tabTitle">
        方向领域
      </h1>
      <div class="cardWrapper">
        {{ intro.directionField }}
      </div>
    </div>

    <div v-if="intro.directionTechnical" style="margin-top: 1rem;">
      <h1 class="tabTitle">
        技术方向
      </h1>
      <div class="cardWrapper">
        {{ intro.directionTechnical }}
      </div>
    </div>

    <div v-if="intro.resources" style="margin-top: 1rem;">
      <h1 class="tabTitle">
        资源
      </h1>
      <div class="cardWrapper">
        {{ intro.resources }}
      </div>
    </div>

    <div v-if="intro.submissionMaterials" style="margin-top: 1rem;">
      <h1 class="tabTitle">
        提交材料
      </h1>
      <div class="cardWrapper">
        {{ intro.submissionMaterials }}
      </div>
    </div>

    <div v-if="intro.evaluationMethod" style="margin-top: 1rem;">
      <h1 class="tabTitle">
        评估方法
      </h1>
      <div class="cardWrapper">
        {{ intro.evaluationMethod }}
      </div>
    </div>

    <div v-if="intro.supportMatching" style="margin-top: 1rem;">
      <h1 class="tabTitle">
        支持匹配
      </h1>
      <div class="cardWrapper">
        {{ intro.supportMatching }}
      </div>
    </div>

    <div v-if="intro.iconicResults" style="margin-top: 1rem;">
      <h1 class="tabTitle">
        标志性成果
      </h1>
      <div class="cardWrapper">
        {{ intro.iconicResults }}
      </div>
    </div>

    <div v-if="intro.challenge" style="margin-top: 1rem;">
      <h1 class="tabTitle">
        挑战
      </h1>
      <div class="cardWrapper">
        {{ intro.challenge }}
      </div>
    </div>

    <div v-if="intro.undergraduatesAchievement" style="margin-top: 1rem;">
      <h1 class="tabTitle">
        本科生成果
      </h1>
      <div class="cardWrapper">
        <a-table
          :columns="achievementColumns"
          :data-source="renderAchievementTable(JSON.parse(intro.undergraduatesAchievement))"
          pagination="false"
          bordered
          style="padding: 0rem;"
        />
      </div>
    </div>

    <div v-if="intro.projectImages && intro.projectImages.length > 0" style="margin-top: 1rem;">
      <h1 class="tabTitle">
        项目展示
      </h1>
      <div>
        <img
          v-for="(src, index) in intro.projectImages"
          :key="index"
          width="1147"
          :src="src"
          :alt="`Project Image ${index + 1}`"
          :style="{ marginTop: index > 0 ? '1em' : 0 }"
          style="max-width: 100%;"
        >
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tabTitle{
  font-size: 2rem;
  font-weight: bold;
  margin: 0rem 0rem 0.5rem 0rem;
}
</style>
